import { useState } from 'react';
import PropTypes from 'prop-types'; //vite-plugin-eslint 里面
import exampleCss from './exampleTask.module.css';
function Incomplete({ inList, onChange }) {
  let count = inList.length;
  return (
    <div>
      <h2>未完成的任务{count}</h2>
      <ul>
        {inList.map((item) => (
          <li key={item.id}>
            <input
              type="checkbox"
              checked={item.checked}
              onChange={(e) => {
                onChange(e, item);
              }}
            ></input>
            <span>{item.content}</span>
          </li>
        ))}
      </ul>
    </div>
  );
}
function Complete({ list, onChange }) {
  let count = list.length;
  return (
    <div>
      <h2>完成的任务{count}</h2>
      <ul>
        {list.map((item) => (
          <li key={item.id}>
            <input
              type="checkbox"
              checked={item.checked}
              onChange={(e) => {
                onChange(e, item);
              }}
            ></input>
            <span className={item.checked && exampleCss.underline}>
              {item.content}
            </span>
          </li>
        ))}
      </ul>
    </div>
  );
}

function Head({ value, onClick, onChange }) {
  return (
    <div>
      <input type="input" value={value} onChange={onChange} />
      <button onClick={(e) => onClick(e, value)}>添加任务</button>
    </div>
  );
}
Incomplete.propTypes = {
  inList: PropTypes.array,
  onChange: PropTypes.func,
};
Complete.propTypes = {
  list: PropTypes.array,
  onChange: PropTypes.func,
};
Head.propTypes = {
  value: PropTypes.string,
  onClick: PropTypes.func,
  onChange: PropTypes.func,
};
function App() {
  let [inList, setInList] = useState([
    {
      id: 0,
      checked: false,
      content: 'aaaaa',
    },
  ]);

  let [list, setList] = useState([
    {
      id: 1,
      checked: true,
      content: 'xxxxx',
    },
  ]);

  let [value, setValue] = useState('');

  let inListChange = (e, item) => {
    console.log(e, item);
    let selectedItem;
    for (let i = 0; i < inList.length; i++) {
      let l = inList[i];
      if (l.id === item.id) {
        selectedItem = {
          id: l.id,
          content: l.content,
          checked: e.target.checked,
        };
        break;
      }
    }
    setInList(inList.filter((e) => e.id !== item.id));
    setList([...list, selectedItem]);
  };

  let listChange = (e, item) => {
    console.log(e, item);
    let selectedItem;
    for (let i = 0; i < list.length; i++) {
      let l = list[i];
      if (l.id === item.id) {
        selectedItem = {
          id: l.id,
          content: l.content,
          checked: e.target.checked,
        };
        break;
      }
    }
    console.log(selectedItem, list, 'listlist');
    setList(list.filter((e) => e.id !== item.id));
    setInList([...inList, selectedItem]);
  };

  let valueClick = (e, value) => {
    console.log(value, 'click-------------------------------------');
    console.log(e);
    let n = Math.max(...inList.map((i) => i.id));
    let maxId = inList.length ? ++n : 0;
    setInList([...inList, { id: maxId, checked: false, content: value }]);
  };
  let valueChange = (e) => {
    console.log(e.target.value, 'e.target.value');
    setValue(e.target.value);
  };

  return (
    <div>
      <Head value={value} onClick={valueClick} onChange={valueChange}></Head>
      <Incomplete inList={inList} onChange={inListChange}></Incomplete>
      <Complete list={list} onChange={listChange}></Complete>
    </div>
  );
}

export default App;
